{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>股票信息平台</title>
    <!-- plugins:css -->
    <link rel="stylesheet" href="{% static 'vendors/mdi/css/materialdesignicons.min.css' %}">
    <link rel="stylesheet" href="{% static 'vendors/base/vendor.bundle.base.css' %}">
    <!-- endinject -->
    <!-- plugin css for this page -->
    <link rel="stylesheet" href="{% static 'vendors/datatables.net-bs4/dataTables.bootstrap4.css' %}">
    <!-- End plugin css for this page -->
    <!-- inject:css -->
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <!-- endinject -->
    <script type="text/javascript" src="{% static 'js/echarts.min.js' %}"></script>
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>

</head>
<body>
<div class="container-scroller">
    <!-- partial:partials/_navbar.html -->
    <nav class="navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row mr-1">
        <div class="navbar-brand-wrapper d-flex justify-content-center">
            <div class="navbar-brand-inner-wrapper d-flex justify-content-between align-items-center w-100">
                <a class="navbar-brand brand-logo" href="{% url 'index' %}"><img src="{% static 'images/logo.svg' %}"
                                                                                 alt="logo"/></a>
                <button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
                    <span class="mdi mdi-sort-variant"></span>
                </button>
            </div>

        </div>
        <div class="navbar-menu-wrapper d-flex align-items-center justify-content-end">


            <ul class="navbar-nav navbar-nav-right">
                {% if request.user_obj %}
                    <ul class="nav-item nav-profile dropdown">
                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" id="profileDropdown">
                           <i class="mdi mdi-account menu-icon"></i>
                            <span class="nav-profile-name">{{ request.user_obj.username }}</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right navbar-dropdown"
                             aria-labelledby="profileDropdown">
                            <li class="dropdown-item">
                                <i class="mdi mdi-settings text-primary"></i>
                                <a href="#">管理中心</a>
                            </li>
                            <li class="dropdown-item">
                                <i class="mdi mdi-logout text-primary"></i>
                                <a href="{% url 'logout' %}">退 出</a>
                            </li>
                        </div>
                    </ul>
                {% else %}
                    <li class="nav-item dropdown mr-4">
                        <a class="nav-link count-indicator dropdown-toggle d-flex justify-content-center align-items-center"
                           href="{% url 'login' %}">
                            <span>登录</span>
                        </a>
                    </li>
                    <li class="nav-item dropdown mr-4">
                        <a class="nav-link count-indicator dropdown-toggle d-flex justify-content-center align-items-center"
                           href="{% url 'register' %}">
                            <span>注册</span>
                        </a>
                    </li>
                {% endif %}

            </ul>
            <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button"
                    data-toggle="offcanvas">
                <span class="mdi mdi-menu"></span>
            </button>
        </div>
    </nav>
    <!-- partial -->
    <div class="container-fluid page-body-wrapper">
        <!-- partial:partials/_sidebar.html -->
        <nav class="sidebar sidebar-offcanvas" id="sidebar">
            <ul class="nav">
                <li id="home" class="nav-item">
                    <a class="nav-link" href={% url 'index' %}>
                        <i class="mdi mdi-home menu-icon"></i>
                        <span class="menu-title">首页</span>
                    </a>
                </li>
                <li id="stock" class="nav-item">
                    <a class="nav-link" href={% url 'stock' %}>
                        <i class="mdi mdi-circle-outline menu-icon"></i>
                        <span class="menu-title">个股</span>
                    </a>
                </li>
                <li id="industry" class="nav-item">
                    <a class="nav-link" href={% url 'industry' %}>
                        <i class="mdi mdi-view-headline menu-icon"></i>
                        <span class="menu-title">行业</span>
                    </a>
                </li>
                <li id="stock_index" class="nav-item">
                    <a class="nav-link" href={% url 'stock_index' %}>
                        <i class="mdi mdi-chart-pie menu-icon"></i>
                        <span class="menu-title">指数</span>
                    </a>
                </li>
                <li id="company" class="nav-item">
                    <a class="nav-link" href={% url 'company' %}>
                        <i class="mdi mdi-grid-large menu-icon"></i>
                        <span class="menu-title">公司</span>
                    </a>
                </li>
                <li id="concept" class="nav-item">
                    <a class="nav-link" href={% url 'concept' %}>
                        <i class="mdi mdi-emoticon menu-icon"></i>
                        <span class="menu-title">概念</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="collapse" href="#auth" aria-expanded="false" aria-controls="auth">
                        <i class="mdi mdi-account menu-icon"></i>
                        <span class="menu-title">用户中心</span>
                        <i class="menu-arrow"></i>
                    </a>
                    <div class="collapse" id="auth">
                        <ul class="nav flex-column sub-menu">
                            <li class="nav-item"><a class="nav-link" href="{% url 'register' %}"> 注册 </a></li>
                            <li class="nav-item"><a class="nav-link" href="{% url 'login' %}"> 登录 </a>
                            </li>
                            <li class="nav-item"><a class="nav-link" href="{% url 'logout' %}"> 退出 </a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li id="qa_chat" class="nav-item">
                    <a class="nav-link" href={% url 'qa_chat' %}>
                        <i class="mdi mdi-android-debug-bridge menu-icon"></i>
                        <span class="menu-title">智能问答</span>
                    </a>
                </li>
            </ul>
        </nav>

        <div class="main-panel">
            <div class="content-wrapper">
                <div class="row">
                    <div class="col-lg-12 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body">
                                <div class="company-list-container"
                                     style="padding: 10px 24px;background: #fff;line-height: 2;font-size: 14px;border-top: none;display: block;border: 1px solid #e2e6e7;box-shadow: 0 0 5px #e2e6e7;">
                                    <div class="company-header"
                                         style="display: flex;align-items: center;cursor: pointer;">
                                        <b class="company-icon"
                                           style="border-left: 3px solid #3b82f4;margin-right: 3px;font-size: 8px;transition: transform 0.3s;"></b>
                                         公司名称一览
                                    </div>
                                    <div class="company-content"
                                         style="height: 0;overflow: hidden;transition:height 0.3s;display: block;">
                                        {% for name in company_data %}
                                            <span>{{name }}</span>
                                        {% endfor %}
                                    </div>
                                </div>
                              </div>

                            </div>
                        </div>
                    </div>

                <div class="row">
                    <div class="col-lg-6 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body">
                                <div class="leftFunction">
                                    <div class="searchBox">
                                        <div class="title"
                                             style="height: 45px;line-height: 45px;margin: 0px auto;font-size: 17px;position: relative;display: block">
                                            <b style="border-left: 3px solid #3b82f4;margin-right: 3px;font-size: 8px"></b>
                                            公司查询
                                        </div>
                                        <form action="/app01/company/" method="post">
                                            <div class="input-group">
                                                <input type="text" class="form-control" name="company_node" placeholder="请输入公司名称">
                                                <div class="input-group-append">
                                                    {#                        <button class="btn btn-sm btn-primary" type="" value="指数查询">Search</button>#}
                                                    <input value="公司查询" type="submit"
                                                           class="btn btn-sm btn-primary">
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div style="display: none"></div>
                                    <div class="resultArea">
                                        <div class="title"
                                             style="height: 45px;line-height: 45px;margin: 0px auto;font-size: 17px;position: relative;display: block">
                                            <b style="border-left: 3px solid #3b82f4;margin-right: 3px;font-size: 8px"></b>
                                            查询结果
                                        </div>
                                        <div style="margin: 20px 0px">
                                            <input type="text" id="company_name" disabled="disabled" class="col-lg-12"
                                                   style="display: block;height: 41px;border-bottom: 1px solid #dee5ef;">
                                            <input type="text" id="company_code" disabled="disabled" class="col-lg-12"
                                                   style="display: block;height: 41px;padding: 15px 5px;border-bottom: 1px solid #dee5ef">
                                            <input type="text" id="company_stock" disabled="disabled" class="col-lg-12"
                                                   style="display: block;height: 41px;padding: 15px 5px;border-bottom: 1px solid #dee5ef">
                                            <input type="text" id="company_thing" disabled="disabled" class="col-lg-12"
                                                   style="display: block;height: 41px;padding: 15px 5px;border-bottom: 1px solid #dee5ef">
                                            <input type="text" id="company_details" disabled="disabled" class="col-lg-12"
                                                   style="display: block;height: 41px;padding: 15px 5px;border-bottom: 1px solid #dee5ef">
                                            <input type="text" id="company_address" disabled="disabled" class="col-lg-12"
                                                   style="display: block;height: 41px;padding: 15px 5px;border-bottom: 1px solid #dee5ef">
                                            <input type="text" id="company_controller" disabled="disabled" class="col-lg-12"
                                                   style="display: block;height: 41px;padding: 15px 5px;border-bottom: 1px solid #dee5ef">
                                            <input type="text" id="company_area" disabled="disabled" class="col-lg-12"
                                                   style="display: block;height: 41px;padding: 15px 5px;border-bottom: 1px solid #dee5ef">
                                            <input type="text" id="company_fund" disabled="disabled" class="col-lg-12"
                                                   style="display: block;height: 41px;padding: 15px 5px;border-bottom: 1px solid #dee5ef">
                                            <input type="text" id="company_proportion" disabled="disabled" class="col-lg-12"
                                                   style="display: block;height: 41px;padding: 15px 5px;border-bottom: 1px solid #dee5ef">
                                            </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body">
                                    <div id="container" style="height: 600px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            <div class="row">

                    <div class="col-lg-12 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body">

                                {% if ctx %}
                                    <div style="height: 700px;display: flex;align-items: center;line-height: 704px;">
                                        <h1 style="margin:auto ">该数据库中未添加该实体</h1>
                                    </div>
                                {% else %}
                                    <div id="container_search" class="col-lg-12"
                                         style="height: 700px;"></div>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <footer class="footer">
                <div class="d-sm-flex justify-content-center justify-content-sm-between">
                    <span class="text-muted text-center text-sm-left d-block d-sm-inline-block">06 组 赵文琳 叶晓萱 秦红 饶书琪 </span>
                    <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"></span>
                </div>
            </footer>
    </div>
            <!-- content-wrapper ends -->
            <!-- partial:../../partials/_footer.html -->


            <!-- partial -->
        </div>
        <!-- main-panel ends -->
    </div>
    <!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->

<!-- plugins:js -->
<script src="{% static 'vendors/base/vendor.bundle.base.js' %}"></script>
<!-- endinject -->
<!-- Plugin js for this page-->
<script src="{% static 'vendors/chart.js/Chart.min.js' %}"></script>
<script src="{% static 'vendors/datatables.net/jquery.dataTables.js' %}"></script>
<script src="{% static 'vendors/datatables.net-bs4/dataTables.bootstrap4.js' %}"></script>
<!-- End plugin js for this page-->
<!-- inject:js -->
<script src="{% static 'js/off-canvas.js' %}"></script>
<script src="{% static 'js/hoverable-collapse.js' %}"></script>
<script src="{% static 'js/template.js' %}"></script>
<!-- endinject -->
<!-- Custom js for this page-->
<script src="{% static 'js/data-table.js' %}"></script>
<script src="{% static 'js/jquery.dataTables.js' %}"></script>
<script src="{% static 'js/dataTables.bootstrap4.js' %}"></script>
<script type="text/javascript">

        window.onload = function () {
            var homeNav = document.getElementById('home');
            var individualNav = document.getElementById('company');

            // 移除已选中状态的样式类
            homeNav.classList.remove('active');

            // 添加选中状态的样式类
            individualNav.classList.add('active');
        }

        document.addEventListener("DOMContentLoaded", function () {
            const header = document.querySelector(".company-header");
            const icon = document.querySelector(".company-icon");
            const content = document.querySelector(".company-content");

            let isContentExpanded = false; // 初始化为收起状态

            header.addEventListener("click", function () {
                if (isContentExpanded) {
                    content.style.height = "0";
                    icon.style.transform = "rotate(0deg)";
                } else {
                    content.style.height = content.scrollHeight + "px";
                    icon.style.transform = "rotate(90deg)";
                }

                isContentExpanded = !isContentExpanded; // 切换状态
            });
        });


        var search_neo4j_data = [{{ company_neo4j_data|safe }}]
        var data2 = search_neo4j_data[0]['data']
        var links2 = search_neo4j_data[0]['links']
        console.log(data2)
        console.log(links2)
        var myChart2 = echarts.init(document.getElementById('container_search'));
        var categories2 = [{name: "公司"}, {name: "行业"}, {name: "概念"}, {name: "股票"}, {name: "指数"}, {name: "高管"}, {name: '股东'}];

        option2 = {
            // 图的标题
            title: {
                text: '查询公司关系图谱'
            },
            // 提示框的配置
            tooltip: {
                position: [10, 10],
                formatter: function (x) {
                    const data = x.data;
                    const des = data.des;

                    // 生成表格代码
                    let tableHTML = '<table>';
                    for (const key in des) {
                        if (des.hasOwnProperty(key)) {
                            const value = des[key];
                            tableHTML += `<tr><td>${key}</td><td>${value}</td></tr>`;
                        }
                    }
                    tableHTML += '</table>';

                    return tableHTML;
                }
            },

            // 工具箱
            toolbox: {
                // 显示工具箱
                show: true,
                feature: {
                    mark: {
                        show: true
                    },
                    // 还原
                    restore: {
                        show: true
                    },
                    // 保存为图片
                    saveAsImage: {
                        show: true
                    }
                }
            },
            legend: [{
                // selectedMode: 'single',
                data: categories2.map(function (a) {
                    return a.name;
                })
            }],
            series: [{
                type: 'graph', // 类型:关系图
                layout: 'force', //图的布局，类型为力导图
                symbolSize: 40, // 调整节点的大小
                roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                edgeSymbol: ['circle', 'arrow'],
                edgeSymbolSize: [2, 10],
                edgeLabel: {
                    normal: {
                        textStyle: {
                            fontSize: 20
                        },
                        show: true,
                        formatter: function (x) {
                            return x.data.name;
                        }
                    }
                },
                force: {
                    repulsion: 2500,
                    edgeLength: [10, 50]
                },
                draggable: true,
                lineStyle: {
                    normal: {
                        width: 2,
                        color: '#4b565b',
                    }
                },
                label: {
                    normal: {
                        show: true,
                        textStyle: {}
                    }
                },

                // 数据
                data: data2,
                links: links2,
                categories: categories2,
            }]
        };
        console.log(option2)
        myChart2.setOption(option2);
        console.log('m')

        document.getElementById("company_name").value = "公司名称:" + data2[0].name
        document.getElementById("company_code").value = "股票代码:" + data2[0].des["股票代码"]
        document.getElementById("company_stock").value = "股票名称:" + data2[0].des["股票名称"]
        document.getElementById("company_thing").value = "主营业务:" + data2[0].des["主营业务"]
        document.getElementById("company_details").value = "公司简介:" + data2[0].des["公司简介"]
        document.getElementById("company_address").value = "办公地址:" + data2[0].des["办公地址"]
        document.getElementById("company_controller").value = "实际控制人:" + data2[0].des["实际控制人"]
        document.getElementById("company_area").value = "所属地域:" + data2[0].des["所属地域"]
        document.getElementById("company_fund").value = "注册资金:" + data2[0].des["注册资金"]
        document.getElementById("company_proportion").value = "股份比例:" + data2[0].des["股份比例"]

        let data0 = [];
        links2.forEach(link => {
            const node_name = link.name;
            if (node_name === '投资') {
                const value = parseFloat(link.des.replace('%', ''));
                const dict = {
                    'name': link.source,
                    'value': value
                };
                data0.push(dict);
            }
        })
        console.log(data0);
        console.log(data0 !== []);

        if (data0.length !== 0) {
            var myChart1 = echarts.init(document.getElementById('container'));
        }
        var option = {
            title: {
                text: '控股股东股份分布图',
                subtext: '十大控股股东',
                left: 'left'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                left: 'center',
                top: 'bottom',
                data: data0.map(item => item.name)
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            series: [
                {
                    name: '股份（%）',
                    type: 'pie',
                    radius: [20, 140],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 5
                    },
                    data: data0
                }
            ]
        };
        if (data0.length !== 0) {
            myChart1.setOption(option);
        }
    </script>
<!-- End custom js for this page-->
</body>

</html>


